<template>
  <div ref="appRef" class="home">
    <div class="bigScreen">
      <div class="content">
        <div class="content-top">
          <div class="content-top-left">
            <div class="top-box top-top flex just-evenly align-center">
              <div class="top-box-info">
                <count-center
                  :number="normalData.medicalIncome"
                  :delay="2000"
                  title="医疗收入（万元）"
                ></count-center>
              </div>
              <div class="top-box-line"></div>
              <div class="top-box-info">
                <count-center
                  :number="normalData.emergencyIncome"
                  :delay="2000"
                  title="门急诊收入（万元）"
                ></count-center>
              </div>
              <div class="top-box-line"></div>
              <div class="top-box-info">
                <count-center
                  :number="normalData.hospitalIncome"
                  :delay="2000"
                  title="住院收入（万元）"
                ></count-center>
              </div>
            </div>
            <div class="top-box top-center">
              <div class="plate-title">药收入占比</div>
              <div class="flex just-around">
                <div class="half-center">
                  <half-circle-pie
                    width="200px"
                    height="180px"
                    :data="drugMap1"
                    subText="门急诊收入药占比"
                  ></half-circle-pie>
                </div>
                <div class="half-center">
                  <half-circle-pie
                    width="200px"
                    height="180px"
                    :data="drugMap2"
                    subText="住院收入药占比"
                  ></half-circle-pie>
                </div>
              </div>
            </div>
            <div class="top-box top-bottom">
              <div class="plate-title">十项收入占比</div>
              <rose-map :interval="2000" :data="roseData"></rose-map>
            </div>
          </div>
          <div class="content-top-center">
            <map-vue :count="normalData.employeesNumber" :data="geoMap"></map-vue>
          </div>
          <div class="content-top-right">
            <div class="top-box top-top flex just-evenly align-center">
              <div class="top-box-info">
                <count-center
                  :number="normalData.emergencyIncomePerson"
                  :delay="2000"
                  title="门急诊人次（万）"
                ></count-center>
              </div>
              <div class="top-box-line"></div>
              <div class="top-box-info">
                <count-center
                  :number="normalData.hospitalVisits"
                  :delay="2000"
                  title="入院人次（万）"
                ></count-center>
              </div>
              <div class="top-box-line"></div>
              <div class="top-box-info">
                <count-center
                  :number="normalData.discharges"
                  :delay="2000"
                  title="出院人次（万）"
                ></count-center>
              </div>
              <div class="top-box-line"></div>
              <div class="top-box-info">
                <count-center
                  :number="normalData.peopleSurgery"
                  :delay="2000"
                  title="手术人次（万）"
                ></count-center>
              </div>
            </div>
            <div class="flex just-between">
              <div class="top-box top-right-center flex-col">
                <div class="plate-title">床位数</div>
                <div class="flex-center flex1" :style="{ marginBottom: '24px' }">
                  <count-center
                    :number="normalData.bedNumber"
                    :delay="2000"
                    :size="48"
                  ></count-center>
                </div>
              </div>
              <div class="top-box top-right-center">
                <div class="plate-title">床位占用率</div>
                <ring-map :data="ringData"></ring-map>
              </div>
            </div>
            <div class="top-box top-bottom">
              <div class="plate-title">医院床位使用率（前五）</div>
              <line-map :data="lineData" :axis-data="badTimeMap"></line-map>
            </div>
          </div>
        </div>
        <div class="content-bottom flex just-between">
          <div class="content-bottom-item">
            <div class="plate-title">住院均次费用（万元）</div>
            <column-map
              width="613px"
              height="280px"
              :data="hospitalizationInfoMap.data"
              :axis-data="hospitalizationInfoMap.area"
              :is-x-axis="true"
            ></column-map>
          </div>
          <div class="content-bottom-item">
            <div class="plate-title">门急诊均次费用（万元）</div>
            <column-map
              width="613px"
              height="280px"
              :data="emergencyInfoMap.data"
              :axis-data="emergencyInfoMap.area"
              :is-x-axis="true"
            ></column-map>
          </div>
          <div class="content-bottom-item">
            <div class="plate-title">医院总收入前五（万元）</div>
            <column-map
              width="613px"
              height="280px"
              :data="totalIncomeInfoMap.data"
              :axis-data="totalIncomeInfoMap.area"
            ></column-map>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, watchEffect, ref, onUnmounted } from 'vue'
  import useIndex from '@/utils/userDraw'
  import CountCenter from '@/components/CountCenter.vue'
  import halfCirclePie from '@/components/halfCirclePie.vue'
  import RoseMap from '@/components/RoseMap.vue'
  import RingMap from '@/components/RingMap.vue'
  import ColumnMap from '@/components/ColumnMap.vue'
  import LineMap from '@/components/LineMap.vue'
  import MapVue from '@/components/Map.vue'
  import { CommonMapResponse, getData, NormalInfoResponse } from '../api/index'
  import { LineData } from '@/utils/interface'
  import { GeoInfoResponse } from '../utils/interface'

  const { appRef, calcRate, windowDraw } = useIndex()
  let normalData = ref<NormalInfoResponse>({
    medicalIncome: 0,
    emergencyIncome: 0,
    emergencyIncomePerson: 0,
    emergencyMedicineIncome: 0,
    hospitalIncome: 0,
    hospitalMedicineIncome: 0,
    hospitalVisits: 0,
    discharges: 0,
    peopleSurgery: 0,
    bedNumber: 0,
    totalBedNumber: 0,
    employeesNumber: 0
  })

  // 收入占比
  let drugMap1 = ref<number[]>([])
  let drugMap2 = ref<number[]>([])
  const timer = ref(0)

  // 十项数据
  const roseData = reactive([
    { value: 0, name: '诊察收入' },
    { value: 0, name: '治疗收入' },
    { value: 0, name: '检验收入' },
    { value: 0, name: '检查收入' },
    { value: 0, name: '手术收入' },
    { value: 0, name: '药品收入' }
  ])

  // 病床使用率
  const ringData = reactive([
    { value: 0, name: '所有' },
    { value: 0, name: '使用' }
  ])

  // 医院病床使用率前五
  const lineData = ref<LineData[]>(
    [
      { value: [], name: '第三人民医院' },
      { value: [], name: '协和医院' },
      { value: [], name: '中日友好医院' },
      { value: [], name: '解放军301医院' },
      { value: [], name: '空军总医院' }
    ].reverse()
  )

  // 病床使用率时间区间
  const badTimeMap = ref<string[]>([])

  let hospitalizationInfoMap = reactive<CommonMapResponse>({
    data: [],
    area: []
  })

  const emergencyInfoMap = reactive<CommonMapResponse>({
    data: [],
    area: []
  })

  const totalIncomeInfoMap = reactive<CommonMapResponse>({
    data: [],
    area: []
  })

  // geo地图终点数据

  const geoMap = ref<GeoInfoResponse[][]>([])

  /**获取并处理数据 */
  const fetchData = async () => {
    try {
      let res = await getData('/screen/data')
      const {
        normal,
        incomeRate,
        hospitalizationInfo,
        emergencyInfo,
        bedRateInfo,
        totalIncomeInfo,
        geoInfo
      } = res.data
      normalData.value = normal
      drugMap1.value = [normal.emergencyMedicineIncome, normal.emergencyIncome]
      drugMap2.value = [normal.hospitalMedicineIncome, normal.hospitalIncome]
      ringData[0].value = normal.totalBedNumber
      ringData[1].value = normal.bedNumber

      // 十项收入占比
      roseData.map((item, idx) => {
        let compareMap = ['examine', 'treat', 'test', 'inspect', 'surgery', 'drug']
        item.value = incomeRate[compareMap[idx]]
        return item
      })

      // 柱状图
      hospitalizationInfoMap.data = hospitalizationInfo.data
      hospitalizationInfoMap.area = hospitalizationInfo.area
      emergencyInfoMap.data = emergencyInfo.data
      emergencyInfoMap.area = emergencyInfo.area
      totalIncomeInfoMap.data = totalIncomeInfo.data
      totalIncomeInfoMap.area = totalIncomeInfo.area

      // 折线图
      lineData.value = bedRateInfo.data
      badTimeMap.value = bedRateInfo.time

      // 飞线图
      geoMap.value = geoInfo.map((item) => [item])
    } catch (error: any) {
      throw new Error(error.message as any)
    }
  }

  // 周期性获取
  const periodicFetch = (time: number) => {
    fetchData()
    timer.value = window.setInterval(fetchData, time)
  }

  onMounted(() => {
    periodicFetch(18000)
    windowDraw()
    calcRate()
  })

  onUnmounted(() => {
    window.clearInterval(timer.value)
  })
</script>

<style lang="scss" scoped>
  $sideWidth: 560px;
  .home {
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: left top;
    .bigScreen {
      width: 100%;
      height: 100%;
      background-image: url('@/assets/images/hx_BGtitle.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 97.8%;
        .content-top {
          display: flex;
          width: 100%;
          //  height: 70.4%;
          // height: 776px;
          margin-top: 88px;
          padding: 0 24px;
          box-sizing: border-box;
          .top-box {
            margin-bottom: 16px;
            background-size: cover;
            background-position: center center;
            overflow: hidden;
            &-line {
              height: 73px;
              background: #2e598d;
              width: 1px;
            }
          }
          &-left {
            width: $sideWidth;
            // border:1px solid #000;
          }
          .top-top {
            height: 160px;
            background-image: url('@/assets/images/560160.png');
          }
          .top-center {
            height: 200px;
            background-image: url('@/assets/images/560200.png');
          }
          .top-bottom {
            height: 280px;
            background-image: url('@/assets/images/560280.png');
          }
          &-center {
            width: calc(1920px - $sideWidth * 2 - 48px);
            //  border:1px solid #000;
          }

          &-right {
            width: $sideWidth;
            //  border:1px solid #000;
          }
          .top-right-center {
            width: 272px;
            height: 200px;
            background-image: url('@/assets/images/272200.png');
          }
        }
        .content-bottom {
          flex: 1;
          padding: 0 24px;
          .content-bottom-item {
            width: 613px;
            height: 280px;
            background-image: url('@/assets/images/613280.png');
            background-size: cover;
            background-position: center center;
          }
        }
      }
    }
  }
  // 板块标题
  .plate-title {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    padding-left: 16px;
    padding-top: 14px;
  }
</style>
